<style lang="">
.tablebar{
    padding: 5px 15px 5px 25px;
}
</style>
<template>

      <div>
      
            <br>
            <div class="tablebar">
                <ButtonGroup size="large">
                    <Button style="width:100px;" @click="change1" :type="buttontype1">原始表</Button>
                    <Button style="width:100px;" @click="change2" :type="buttontype2">自定义表</Button>
                </ButtonGroup>
            </div>
            <br>
            <div class="tablebar">
                <Row>
                <Col span="8">      
                    <Select  style="width:200px">
                        <Option value="1">item.label </Option>
                        <Option value="1">item.label </Option>
                        <Option value="1">item.label </Option>
                        <Option value="1">item.label </Option>
                        <Option value="1">item.label </Option>
                    </Select>
                </Col> 
                <Col span="8">    
                    <Select  style="width:200px">
                        <Option value="1">item.label </Option>
                        <Option value="1">item.label </Option>
                        <Option value="1">item.label </Option>
                        <Option value="1">item.label </Option>
                        <Option value="1"> item.label </Option>
                    </Select>
                </Col>
                <Col span="8"><Input icon="ios-search" placeholder="请输入..." style="width: 200px"></Input></Col>
                </Row>
            </div>
            <br>

                <Table :columns="columns1" :data="data1"></Table>
      </div>
</template>
<script>
    export default {
            data() {
                return {
                    columns1: [
                        {
                            title: '表名',
                            key: 'tablename',
                            render: (h, params) => {
                                return h('div', [
                                    h('a', {
                                        props:{
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'  
                                        },
                                        on:{
                                            click: () => {
                                                alert(params.index)
                                            }    
                                        }
                                    }, params.row.tablename)
                                ]);
                            }
                        },
                        {
                            title: '状态',
                            key: 'status',
                            align: 'center'
                        },
                        {
                            title: '操作',
                            key: 'action',
                            width: 350,
                            align: 'center',
                            render: (h,params) => {
                                return h('div',[
                                    h('a',{
                                        props:{
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'  
                                        },
                                        on:{
                                            click: () => {
                                                alert(params.index)
                                            }    
                                        }
                                    }, '抽取设置')
                                ]);
                            }
                        }
                    ],
                    data1:[{
                        tablename: 'account',
                        status: '直连'
                    },{
                        tablename: 'account_accountaccount_accountaccount_account',
                        status: '直连'
                    },{
                        tablename: 'accouaccount_accountaccount_accountnt',
                        status: '直连'
                    },{
                        tablename: 'accaccount_accountount',
                        status: '直连'
                    }],
                    buttontype1: 'primary',
                    buttontype2: 'ghost'
                }
            },
            methods: {
                change1 () {
                    if (this.buttontype1 !== 'primary') {
                        this.buttontype1 = 'primary'
                        this.buttontype2 = 'ghost'
                    }
                },
                change2 () {
                    if (this.buttontype2 !== 'primary') {
                        this.buttontype2 = 'primary'
                        this.buttontype1 = 'ghost'
                    }
                }
            }
    }
</script>